<template>
	<div v-show="isshow" id="alert">
		<div v-if="type == 1" class="alert">
			<div class="alert_1">
				{{content}}
			</div>
			<div class="alert_2">
				<input id="alert_confirm" @click="AlertSure" type="button" value="确定" />
			</div>
		</div>
		<div v-else-if="type == 2" class="confirm">
			<div class="confirm_1">
				{{content}}
			</div>
			<div class="confirm_2">
				<input @click="close" type="button" value="取消" />
				<input id="determine" @click="Determine" type="button" value="确定" />
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'alert',
	data:function(){
		return{
			isshow: false,
			type: 1,//弹窗类型
			content: '',
		}
	},
	methods:{
		close:function(){
			this.isshow = false;
		},
		AlertSure:function(){
			this.alertSure();
			this.isshow = false;
		},
		Determine:function(){
			this.confirmSure();
			this.isshow = false;
		}
	}
}
</script>

<style>
#alert{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 11;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*---------alert-----------*/
.alert{
	width: 90%;
	border-radius: 5px;
	overflow: hidden;
	background-color: #FFFFFF;
}
.alert_1{
	background-color: #F6F6F6;
	padding: 1.5rem 2rem;
	text-align: center;
	box-sizing: border-box;
	color: #4F4F4F;
	font-size: 1.2rem;
}
.alert_2{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.2rem 0;
}
.alert_2 input{
	width: 12rem;
	height: 2.6rem;
	background-color: #FDA920;
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	font-size: 1.2rem;
}
/*---------confirm------------*/
.confirm{
	width: 90%;
	border-radius: 5px;
	overflow: hidden;
	background-color: #FFFFFF;
}
.confirm_1{
	background-color: #F6F6F6;
	padding: 1.5rem 2rem;
	text-align: center;
	box-sizing: border-box;
	color: #4F4F4F;
	font-size: 1.2rem;
}
.confirm_2{
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1.2rem 0;
}
.confirm_2 input:first-child{
	width: 10rem;
	height: 2.6rem;
	background-color: #CBCBCB;
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	font-size: 1.2rem;
	margin-right: 1rem;
}
.confirm_2 input:last-child{
	width: 10rem;
	height: 2.6rem;
	background-color: #FDA920;
	color: #FFFFFF;
	border: none;
	border-radius: 50px;
	font-size: 1.2rem;
}
</style>
